<div class="relative space-y-1 text-sm">
	<label
		for="searchQuery"
		class="block"
		[ngClass]="['text' + plainInv, !query ? 'invisible' : 'visible']"
	>
		Filter categories...
	</label>
	<input
		type="text"
		#searchQuery
		name="searchQuery"
		id="searchQuery"
		class="px-3 py-1 rounded-md"
		placeholder="Filter categories..."
		[(ngModel)]="query"
		[ngClass]="['border' + neutral, 'bg' + contrast, 'text' + defaultInv]"
	/>
	<button
		*ngIf="!!query"
		type="button"
		title="Clear filter"
		class="absolute px-2 py-3 border-transparent right-1 top-5"
		(click)="resetQuery()"
	>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 512 512"
			fill="currentColor"
			class="flex-shrink-0 w-3 h-3"
		>
			<polygon
				points="427.314 107.313 404.686 84.687 256 233.373 107.314 84.687 84.686 107.313 233.373 256 84.686 404.687 107.314 427.313 256 278.627 404.686 427.313 427.314 404.687 278.627 256 427.314 107.313"
			/>
		</svg>
	</button>
</div>
